<template>
  <div>
    <div class="btn-container">
      <div class="btn-text" v-text="displayTitle" />
      <div class="btn-menu">
        <a-menu v-model="current" mode="horizontal" @click="handleConditionClick">
          <a-menu-item key="createdTime">
            最新
          </a-menu-item>
          <a-menu-item key="blogGoods">
            点赞最多
          </a-menu-item>
          <a-menu-item key="blogComment">
            评论最多
          </a-menu-item>
          <a-menu-item key="blogRead">
            阅读最多
          </a-menu-item>
          <a-menu-item key="blogCollection">
            收藏最多
          </a-menu-item>
        </a-menu>
      </div>
    </div>

    <div class="blog-list-container">
      <a-card v-for="item in blogList" :key="item.blogId" class="blog-card" :body-style="blogBodyStyle">
        <div class="blog-main">
          <div v-if="item.blogImage">
            <img :src="item.blogImage" class="blog-cover">
          </div>
          <router-link :to="'/blog/' + item.blogId" :class="item.blogImage? 'image-blog' : 'blog-container' ">
            <div>
              <div class="blog-title" v-text="item.blogTitle" />
              <div class="blog-summary" v-html="item.blogSummary ? item.blogSummary : '暂无预览'" />
            </div>
            <div class="blog-bottom">
              <div class="blog-type">
                分类：<a-tag color="green" v-text="item.typeName" />
              </div>
              <div class="blog-meta">
                <div class="blog-time">{{ item.createdTime }}</div>
                <div class="blog-other">
                  <a-icon type="eye" /><span style="margin-right: 3px" v-text="item.blogRead" />
                  <a-icon type="like" /><span style="margin-right: 3px" v-text="item.blogGoods" />
                  <a-icon type="heart" /><span style="margin-right: 3px" v-text="item.blogCollection" />
                  <a-icon type="message" /><span style="margin-right: 3px" v-text="item.blogComment" />
                </div>
              </div>
            </div>
          </router-link>
        </div>
      </a-card>
    </div>

    <div v-if="page.totalPage > 1">
      <a-pagination :default-current="1" :total="page.totalCount" @change="pageChange" />
    </div>
  </div>
</template>
<script>
import blogApi from '@/api/blog'
export default {
  props: {
    name: {
      type: String,
      default: '博客'
    }
  },
  data() {
    return {
      displayTitle: '博客',
      current: ['createdTime'],
      blogBodyStyle: {
        padding: '18px'
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        params: {},
        sortColumn: 'createdTime',
        sortMethod: 'desc',
        list: []
      },
      blogList: []
    }
  },
  watch: {
    '$route.params.searchContent': function(newVal, oldVal) {
      this.displayTitle = '搜索结果'
      this.page.currentPage = 1
      if (!newVal || newVal === '') {
        this.page.params.blogTitle = null
      } else {
        this.page.params.blogTitle = newVal
      }
      this.page.sortColumn = 'createdTime'
      this.page.sortMethod = 'desc'
      this.getPage()
    }
  },
  created() {
    if (this.$route.params.searchContent) {
      this.displayTitle = '搜索结果'
      this.page.params.blogTitle = this.$route.params.searchContent
    }
    if (this.$route.params.type) {
      this.page.params.typeId = this.$route.params.type
    }
    this.getPage()
  },
  methods: {
    getPage() {
      this.page.list = []
      blogApi.getByPage(this.page).then(resp => {
        this.blogList = resp.data.list
        this.page = resp.data
      })
    },
    pageChange(pageNumber) {
      if (pageNumber !== this.page.currentPage) {
        this.page.currentPage = pageNumber
        this.getPage()
      }
    },
    handleConditionClick(e) {
      console.log(e)
      this.page.sortColumn = e.key
      this.getPage()
    }
  }
}
</script>
<style scoped>
.btn-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 5px;
  align-items: center;
  line-height: 70px;
}
.btn-text {
  font-size: 20px;
}
.ant-menu-horizontal {
  border-bottom: none !important;
}
.ant-menu {
  background: none !important;
}
a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #3e4149;
}
a:hover {
  color: #3e4149;
}
.blog-list-container {

}
.blog-card {
  margin-bottom: 10px;
  border-radius: 5px;
  max-height: 250px;
  min-height: 100px;
}
.blog-main {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.blog-cover {
  width: 230px;
  max-height: 130px;
  margin-right: 20px;
}
.blog-container {
  width: 100%;
  min-height: 80px;
  max-height: 130px;
}
.image-blog {
  width: 530px;
  min-height: 100px;
  max-height: 130px;
}
.blog-title {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}
.blog-summary {
  margin-top: 5px !important;
  margin-bottom: 10px;
  font-size: 14px;
  color: #9c9ea8;
  line-height: 22px;
  max-height: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.blog-meta {
  font-size: 12px;
  color: #999898;
  display: flex;
  flex-direction: row;
}
.blog-time {
  margin-right: 8px;
}
</style>
